<script lang="ts">
export default {
  options: {
    virtualHost: true, // 虚拟节点
    styleIsolation: 'shared', // 解除样式隔离
  },
}
</script>

<script lang="ts" setup>
withDefaults(defineProps<{
  loading?: boolean
}>(), {
  loading: true,
})
</script>

<template>
  <view v-if="!loading" class="page">
    <slot />
  </view>
  <view v-else class="page flex-col-center-center">
    <wd-loading custom-class="loading" size="50px" color="#20B777" />
  </view>
</template>

<style lang="scss" scoped>
.page {
  background-color: #FFF;
  min-height: 100vh;
}

:deep(.loading) {
  // background: $theme-color;
  // padding: 10px;
  // border-radius: 4px;
}
</style>
